<template>
    <div class="app-container">
        <el-breadcrumb separator="/" class="breadcrumb2">
            <el-breadcrumb-item :to="{ path: '/userrightlink2/userrightlink21' }">组织申请</el-breadcrumb-item>
        </el-breadcrumb>
        <!--当前管理权限-->
        <el-card class="right">
            <div>
                <i class="el-icon-suitcase"></i>
                <span >当前管理权限：</span>
                <el-tag>{{nowRight}}</el-tag>
            </div>
        </el-card>
        <!--申请权限记录-->
        <el-card class="righttable">
            <i class="el-icon-s-data"></i>
            <span>申请权限记录</span>
            <el-dropdown split-button type="primary" style="position:reletive;float:right;margin-right:10px" size="small" @click="handleClick">
                申请权限
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="applyRight(1)">校级管理员</el-dropdown-item>
                    <el-dropdown-item @click.native="applyRight(2)">院级管理员</el-dropdown-item>
                    <el-dropdown-item @click.native="applyRight(3)">专业管理员</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            
            <el-table
                :data="rightHistory"
                style="width: 100%; margin-top:20px;"
                fit 
                border
                stripe
            >     
                <el-table-column
                type="index"
                width="50"
                align="center">
                </el-table-column>
                <el-table-column
                prop="groupName"
                label="申请职位"
                min-width="100"
                align="center">
                </el-table-column>
                <el-table-column
                prop="applyTime"
                label="申请时间"
                min-width="100"
                align="center">
                </el-table-column>
                <el-table-column
                prop="status"
                label="审核情况"
                min-width="100"
                align="center">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.status==0">待审核</el-tag>
                    <el-tag type="success" v-else-if="scope.row.status==1">审核通过</el-tag>
                    <el-tag type="danger" v-else>审核不通过</el-tag>
                </template>
                </el-table-column>
                <el-table-column
                label="操作"
                min-width="100"
                align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="openDetail(scope.row)">查看明细</el-button>
                </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next,jumper"
                :current-page.sync="formInline.pageNum"
                :page-size="formInline.pageSize"
                :page-sizes="[5, 10, 15]"
                :total="total"
            ></el-pagination>
            </div>
        </el-card>
        <!--申请权限对话框-->
        <el-dialog
        title="权限申请"
        :visible.sync="rightdialogVisible"
        width="50%">
        <div style="margin-left:200px">
        <el-form :model="applyForm" :rules="rules" ref="applyForm">
            <el-form-item v-if="righttype!==1" label="上级单位：" prop="value">
                <el-cascader
                    class="rightInput"
                    v-model="applyForm.value"
                    :options="options"
                    :props="myprop"
                    aria-required="true"
                    ></el-cascader>
            </el-form-item>
            <el-form-item v-if="righttype==1" label="学校名称：" prop="name">
                <el-input v-model="applyForm.name" placeholder="请输入学校名称" class="rightInput" />
            </el-form-item>
            <el-form-item v-if="righttype==2" label="学院名称：" prop="name">
                <el-input v-model="applyForm.name" placeholder="请输入学院名称" class="rightInput" />
            </el-form-item>
            <el-form-item v-if="righttype==3" label="专业名称：" prop="name">
                <el-input v-model="applyForm.name" placeholder="请输入专业名称" class="rightInput" />
            </el-form-item>
            
        </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closerightdialogVisible('applyForm')">取 消</el-button>
            <el-button type="primary" @click="applyRightYes('applyForm')">确 定</el-button>
        </span>
        </el-dialog>
        <!--申请权限明细对话框-->
        <el-dialog
        title="详细情况"
        :visible.sync="rightDetailsdialogVisible"
        width="50%">
            <el-table
                :data="rightDetailsList"
                style="width: 100%; margin-top:20px;"
                fit 
                border
                stripe
            >     
                <el-table-column
                prop="auditGroup"
                label="审核单位"
                min-width="100"
                align="center">
                </el-table-column>
                <el-table-column
                prop="auditTime"
                label="审核时间"
                min-width="100"
                align="center">
                </el-table-column>
                <el-table-column
                prop="status"
                label="审核情况"
                min-width="100"
                align="center">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status==1">审核通过</el-tag>
                    <el-tag type="warning" v-else-if="scope.row.status==0">待审核</el-tag>
                    <el-tag type="danger" v-else>审核不通过</el-tag>
                </template>
                </el-table-column>
                <el-table-column
                prop="rejectReason"
                label="原因"
                min-width="100"
                align="center">
                </el-table-column>
            </el-table>
            
        <span slot="footer" class="dialog-footer">
            
            <el-button type="primary" @click="closerightDetailsdialogVisible()">关  闭</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import qs from 'qs'
export default {
    data(){
        return{
            righttype:'',
            nowRight:'暂无任何权限',
            rightHistory:[],

            // 分页
            formInline: {
                pageNum: 1,
                pageSize: 5,
            },
            tid: null,
            total: 0,

            //权限申请对话框
            myprop:{
                label:'groupName',
                value:'id'
            },
            rightdialogVisible:false,
            applyForm:{
                value:[],name:''
            },
            options:[],
            options1:[
                {
                    value:'1',
                    label:'浙江工商大学',
                },
                {
                    value:'2',
                    label:'浙江理工大学',
                },
            ],
            options2:[
                {
                    value:'1',
                    label:'浙江工商大学',
                    children:[
                        {value:'11',label:'信息学院',},
                        {value:'12',label:'信电学院',},
                        {value:'13',label:'会计学院',}
                    ]
                },
                {
                    value:'2',
                    label:'浙江理工大学',
                    children:[
                        {value:'21',label:'信息学院',},
                        {value:'22',label:'信电学院',},
                        {value:'23',label:'会计学院',}
                    ]
                },
            ],
            options3:[
                {
                    value:'1',
                    label:'浙江工商大学',
                    children:[
                        {value:'11',label:'信息学院',children:[{value:'111',label:'软件工程'},{value:'112',label:'软件安全'},{value:'113',label:'计算机技术与科学'},]},
                        {value:'12',label:'信电学院',children:[{value:'121',label:'软件工程'},{value:'122',label:'软件安全'},{value:'123',label:'计算机技术与科学'},]},
                        {value:'13',label:'会计学院',children:[{value:'131',label:'软件工程'},{value:'132',label:'软件安全'},{value:'133',label:'计算机技术与科学'},]}
                    ]
                },
            ],
            
            //权限申请详细情况对话框
            rightDetailsdialogVisible:false,
            rightDetailsList:[
                
            ],
            //用户信息
            uid:'',
            //表单验证信息
            rules: {
                name: [
                    { required: true, message: '请输入组织名称', trigger: 'change' },
                ],
                value:[
                    { required: true, message: '请选择上级单位', trigger: 'change' },
                ]
            }

        }
    },
    created(){
        this.uid=window.sessionStorage.getItem('uid');
        this.getList();
        this.getRoleofZuzhi();
        this.getRole()
    },
    mounted(){
        
    },
    methods:{
        //打开申请权限对话框
        async applyRight(data){
            if(sessionStorage.getItem('role')==0){
                this.righttype=data
                if(data===1){}
                    // this.options=this.options1
                else if(data===2){
                    // this.options=this.options1;
                    const { data: res } = await this.$http.get('/authority/getGroupList', {
                        params: {
                            groupType:1,
                            groupId :1
                        }
                    })
                    if(res!=null){
                        this.options=res.data
                    }
                }else{
                    //设置申请专业管理员的下拉选项，包括学校与学院
                    this.options=this.options2
                    const { data: res } = await this.$http.get('/authority/getGroupList', {
                        params: {
                            groupType:1,
                            groupId :1
                        }
                    })
                    if(res!=null){
                        this.options=res.data
                    }
                    for (let i = 0; i < this.options.length; i++) {
                        if(!this.options[i].children) {
                            this.$set(this.options[i], 'children', []);
                        }
                        const { data: res } = await this.$http.get('/authority/getGroupList', {
                            params: {
                                groupType:2,
                                groupId :this.options[i].id
                            }
                        })
                        console.log("res",res)
                        if(res.data!=null){
                            this.options[i].children = res.data;
                        }else{
                            this.options.pop(i);
                        }
                    }
                    
                }
                this.rightdialogVisible=true
            }else{
                this.$alert('当前已经拥有组织管理员身份，不可再次申请其他组织管理员。如有需要，请联系系统管理员！', '已成为组织管理员', {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                    type: 'info',
                    message: '已取消操作'
                    });
                }
                });
            }
        },
        //获取当前用户的权限等级
        async getRoleofZuzhi(){
            const {data:res} = await this.$http.get('/authority/getOwnAuth',{
                params:{
                    uid:this.uid
                }
            })
            if(res!=null){
                this.nowRight=res.data.adminGroupEntity.groupName+"管理员"
            }
        },
        //获取当前用户角色
        async getRole(){
            const { data: res } = await this.$http.get('/auth/getRoleId', {
                params: {
                    uid:this.uid
                },
            })
            if(res!=null){
                sessionStorage.setItem('role',res.data)
            }
        },
        
        //获取详细信息
        async openDetail(data){
            const { data: res } = await this.$http.get('/authority/getOneAuthApplyDetail', {
                params: {
                    recordId:data.recordId
                },
            })
            if(res!=null){
                console.log(res)
                this.rightDetailsList.push(res.data);
            }
            this.rightDetailsdialogVisible=true
        },
        //关闭详细信息对话框
        closerightDetailsdialogVisible(){
            this.rightDetailsList.pop(0)
            this.rightDetailsdialogVisible=false
        },
        //获取申请记录表
        async getList(){
            const { data: res } = await this.$http.get('/authority/getAuthApplyHistory', {
                params: {
                    uid: this.uid,
                    pageNum:this.formInline.pageNum,
                    pageSize:this.formInline.pageSize
                },
            })
            if(res!=null){
                this.rightHistory=res.data.list;
                this.total=res.data.total;
                console.log("22222",res.data.list)
                console.log("jieguo!!!!",res.data)
                console.log("myuid!!!!",this.uid)
            }
        },
        // 实现分页
        // 更改了每页大小
        handleSizeChange(val) {
            this.formInline.pageNum = 1
            this.formInline.pageSize = val
            this.getList()
        },
        // 更改了第几页
        handleCurrentChange(val) {
            this.formInline.pageNum = val
            this.getList()
        },
        handleClick(){

        },
        handleClose(){

        },
        handleChange(){},
        closerightdialogVisible(formName){
            this.applyForm.value=""
            this.applyForm.name=""
            this.rightdialogVisible=false
            this.$refs[formName].resetFields();
        },
        //申请组织管理员权限
        applyRightYes(formName){
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    var gid=0;
                    if(this.righttype==2)
                        gid=this.applyForm.value[0]
                    else if(this.righttype==3)
                        gid=this.applyForm.value[1]
                    console.log(gid)
                    console.log(this.applyForm.name)
                    // const { data: res } = await this.$http.post('/authority/subAuthApply?groupId='+gid+'&groupName='+this.applyForm.name+'&uid='+this.uid)
                    const { data: res } = await this.$http.post('/authority/subAuthApply',
                        qs.stringify({
                            groupId:gid,
                            groupName:this.applyForm.name,
                            uid:this.uid
                        })
                    )
                    if(res.code==200){
                        this.$message({
                        message: '提交成功',
                        type: 'success'
                        });
                        this.getList()
                    }else{
                        this.$message.error('提交错误');
                    }
                    this.applyForm.value=""
                    this.applyForm.name=""
                    this.rightdialogVisible=false
                    this.$refs[formName].resetFields();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
            
        }
        
    }
}
</script>

<style scoped>
    .rightInput{
        width: 250px;
    }
</style>